<template>
    <div class="pageWrapper">
        <div class="closeBtn">
            <span class="iconfont iconicon-test"></span>
        </div>
        <div class="logoWrapper">
            <span class="iconfont iconnew"></span>
        </div>

        <AuthInput
            placeholder="用户名 / 手机号"
            type="text"
            :rule="/^\d{5,11}$/"
            err_msg="请输入合法手机号"
            @valChange="setUsername"
        />

        <AuthInput
            placeholder="密码"
            type="password"
            :rule="/^\d{3,8}$/"
            err_msg="请输入合法密码"
            @valChange="setPassword"
        />

        <AuthBtn btnText="马上登陆" @submit="login"/>
    </div>
</template>

<script>
    import AuthInput from "../components/AuthInput";
    import AuthBtn from "../components/AuthBtn"

    export default {
        data() {
            return {
                username: '',
                password: ''
            }
        },
        components: {
            AuthInput,
            AuthBtn
        },
        methods: {
            setUsername(newUser) {
                this.username = newUser
            },
            setPassword(newPass) {
                this.password = newPass
            },
            login() {
                console.log('这里应该登陆');
                console.log('用户名', this.username);
                console.log('密码', this.password);

                // 发送前先校验数据的存在
                if (!this.username || !this.password) {
                    this.$toast.fail('请输入完整信息')
                    return;
                }

                // 真的发送请求
                this.$axios({
                    method:'post',
                    url: '/login',
                    data: {
                        username: this.username,
                        password: this.password
                    }
                }).then(res=>{
                    console.log(res.data);
                    if (res.data.message == "登录成功") {
                        this.$toast.success('登录成功')
                        // 1. 这里是登录成功, 应该的将 token 存起来
                        localStorage.setItem('token', res.data.data.token)
                        localStorage.setItem('userId', res.data.data.user.id)
                        // 2. 跳转到个人中心页(可以延时, 提升体验)
                        setTimeout(() => {
                            this.$router.replace('/personal')
                        }, 800);
                    }
                }).catch(err=>{
                    console.dir(err)
                    this.$toast.fail('系统错误')
                })
            }
        }
    };
</script>

<style lang="less" scoped>
    .pageWrapper {
        padding: 24/360 * 100vw;
    }
    .iconicon-test {
        font-size: 26/360 * 100vw;
    }
    .logoWrapper {
        text-align: center;
        .iconnew {
            font-size: 126/360 * 100vw;
            color: #d81e06;
        }
    }
</style>